<template>
    <div class="right">
        <div class="header">会员中心-我的点亮</div>
        <div class="content">
            <div class="items" v-for="(item, index) in list" :key="index">
                <img :src="item.img" alt="">
                <div class="right">
                    <div class="top" :style="{ color: item.topColor }">{{ item.top }}</div>
                    <div class="center">{{ item.center }}</div>
                    <div class="bottom">{{ item.bottom }}</div>
                </div>
                <div class="title">{{ item.title }}</div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { myLight } from '@/api/index'
import one from '@/assets/组 3@2x.png'
import two from '@/assets/组 3@2x (1).png'
import three from '@/assets/组 3@2x (2).png'
import four from '@/assets/组 3@2x (3).png'
import five from '@/assets/组 3@2x (4).png'
import six from '@/assets/组 3@2x (5).png'
const arr = ref<any>({})
const list = ref([
    { title: '慧眼如炬', img: one, top: '30+', center: '对题库错误内容进行纠错', bottom: '你已纠错20题啦，加油', topColor: '#1296DB' },
    { title: '见多识广', img: two, top: '300+', center: '上传科普知识题库获取认可', bottom: '你已上传10题啦,加油', topColor: '#FFA54C' },
    { title: '学有所成', img: three, top: '10+', center: '答题升级成功', bottom: '你已经在第6级啦,加油', topColor: '#D35B80' },
    { title: '出类拔萃', img: four, top: '3+', center: '竞赛答题取得优秀名次', bottom: '你已经竞赛答题5次,加油', topColor: '#7DC5EB' },
    { title: '笃志好学', img: five, top: '50+', center: '累计打卡练习天数', bottom: '你已经打卡练习60天,恭喜过关', topColor: '#3A40EE' },
    { title: '格物致远', img: six, top: '50+', center: '观看前沿科学知识和科学视频', bottom: '你已经观看60个视频啦,恭喜过关', topColor: '#1AFA29' },
])

const getList = async () => {
    const res = await myLight({})
    arr.value = res.data
    list.value[0].top = computeds(res.data.correctWrongNum)
    list.value[1].top = computeds(res.data.addQuestionNum)
    list.value[2].top = computeds(res.data.level)
    list.value[3].top = computeds(res.data.joinedCompetitionNum)
    list.value[4].top = computeds(res.data.practiceDays)
    list.value[5].top = computeds(res.data.watchPopularizeNum)

    list.value[0].bottom = '你已纠错' + res.data.correctWrongNum + '题啦，加油'
    list.value[1].bottom = '你已上传' + res.data.addQuestionNum + '题啦,加油'
    list.value[2].bottom = '你已经在第' + res.data.level + '级啦,加油'
    list.value[3].bottom = '你已经竞赛答题' + res.data.joinedCompetitionNum + '次,加油'
    list.value[4].bottom = '你已经打卡练习' + res.data.practiceDays + '天,恭喜过关'
    list.value[5].bottom = '你已经观看' + res.data.watchPopularizeNum + '个视频啦,恭喜过关'
}

const computeds = (item: any) => {
    if (item <= 10) {
        return item + '+'
    } else if (item > 10) {
        // 将数字向下取整到最近的10的倍数
        const rounded = Math.floor(item / 10) * 10;
        return rounded + '+';
    }
}

getList()

</script>
<style scoped lang="scss">
.right {
    width: calc(100% - 410px);
    height: 100%;

    .header {
        width: 100%;
        padding: 15px 0;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 18px;
        color: #000000;
        border-bottom: 1px solid #E6E6E6;
    }

    .content {
        width: 100%;
        height: calc(100% - 55px);
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: flex-start;
        box-sizing: border-box;
        padding: 40px 0;

        .items {
            width: 419px;
            height: 148px;
            background: #FFFFFF;
            border-radius: 7px;
            border: 1px solid #E3E3E3;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            padding: 35px;
            margin-bottom: 70px;
            position: relative;
            z-index: 1;

            .title {
                width: 104px;
                height: 24px;
                position: absolute;
                z-index: 2;
                left: 10px;
                top: -10px;
                text-align: center;
                background: #fff;
            }

            img {
                width: 112px;
                height: 94px;
            }

            .right {
                width: calc(100% - 112px);
                height: 100%;
                text-align: center;

                .top {
                    font-family: Impact;
                    font-weight: 400;
                    font-size: 41px;
                }

                .center {
                    color: #000000;
                    font-size: 14px;
                }

                .bottom {
                    color: #8C8C8C;
                    font-size: 13px;
                }

            }
        }
    }
}
</style>